<!DOCTYPE html>
<html>
<head lang="kr">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title>9.5 [Map chart] japan map</title>
    <link rel="stylesheet" type="text/css" href="../dist/tui-chart.css" />
    <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/codemirror.css'/>
    <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/lint/lint.css'/>
    <link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/theme/neo.css'/>
    <link rel='stylesheet' type='text/css' href='./css/example.css'/>
</head>
<body>
<div class='wrap'>
    <div class='code-html' id='code-html'>
        <div id='chart-area'></div>
    </div>
    <div class='custom-area'>
        <div id='error-dim'>
            <span id='error-text'></span>
            <div id='error-stack'></div>
            <span id='go-to-dev-tool'>For more detail, open browser's developer tool and check it out.</span>
        </div>
        <div class="try-it-area">
            <h3>try it</h3>
            <textarea id="code"></textarea>
            <div class="apply-btn-area">
                <button class="btn" onclick='evaluationCode(chartCM, codeString);'>Run it!</button>
            </div>
        </div>
    </div>
</div>
<script type='text/javascript' src='https://uicdn.toast.com/tui.chart/latest/raphael.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.js'></script>
<script src='../dist/tui-chart.js'></script>
<script src='../dist/maps/japan.js'></script>
<script class='code-js' id='code-js'>
var container = document.getElementById('chart-area');
var data = {
    series: [
        {
            code: 'JP-AC',
            data: 2.21
        },
        {
            code: 'JP-AT',
            data: -2.93
        },
        {
            code: 'JP-AM',
            data: -3.84
        },
        {
            code: 'JP-CB',
            data: -0.23
        },
        {
            code: 'JP-EM',
            data: 0.42
        },
        {
            code: 'JP-FK',
            data: -0.86
        },
        {
            code: 'JP-FO',
            data: 4.46
        },
        {
            code: 'JP-FS',
            data: -1.71
        },
        {
            code: 'JP-GF',
            data: -0.03
        },
        {
            code: 'JP-GM',
            data: 2.35
        },
        {
            code: 'JP-HG',
            data: -0.08
        },
        {
            code: 'JP-HK',
            data: 1.78
        },
        {
            code: 'JP-HS',
            data: 0.52
        },
        {
            code: 'JP-IR',
            data: 2.56
        },
        {
            code: 'JP-IK',
            data: 1.78
        },
        {
            code: 'JP-IT',
            data: -0.72
        },
        {
            code: 'JP-KC',
            data: -1.60
        },
        {
            code: 'JP-KG',
            data: 0.28
        },
        {
            code: 'JP-KM',
            data: 0.87
        },
        {
            code: 'JP-KN',
            data: 2.27
        },
        {
            code: 'JP-KS',
            data: 0.26
        },
        {
            code: 'JP-KT',
            data: -0.02
        },
        {
            code: 'JP-ME',
            data: -0.97
        },
        {
            code: 'JP-MY',
            data: 2.03
        },
        {
            code: 'JP-MZ',
            data: 1.20
        },
        {
            code: 'JP-NG',
            data: -0.20
        },
        {
            code: 'JP-NN',
            data: -1.30
        },
        {
            code: 'JP-NR',
            data: -0.97
        },
        {
            code: 'JP-NS',
            data: -2.58
        },
        {
            code: 'JP-ON',
            data: 1.08
        },
        {
            code: 'JP-OK',
            data: 1.43
        },
        {
            code: 'JP-OY',
            data: 1.93
        },
        {
            code: 'JP-OT',
            data: 2.52
        },
        {
            code: 'JP-SG',
            data: -1.60
        },
        {
            code: 'JP-SH',
            data: 4.30
        },
        {
            code: 'JP-ST',
            data: 3.96
        },
        {
            code: 'JP-SZ',
            data: -0.97
        },
        {
            code: 'JP-TC',
            data: 1.77
        },
        {
            code: 'JP-TK',
            data: 5.42
        },
        {
            code: 'JP-TS',
            data: -1.15
        },
        {
            code: 'JP-TY',
            data: 0.15
        },
        {
            code: 'JP-WY',
            data: -1.65
        },
        {
            code: 'JP-YC',
            data: -3.34
        },
        {
            code: 'JP-YT',
            data: -0.75
        }
    ]
};
var options = {
    chart: {
        width: 700,
        height: 800,
        title: 'Population growth rate of Japan (2005 ~ 2010)'
    },
    map: 'japan',
    legend: {
        align: 'bottom'
    }
};
var theme = {
    series: {
        startColor: '#ffefef',
        endColor: '#ac4142',
        overColor: '#75b5aa'
    }
};

// For apply theme

// tui.chart.registerTheme('myTheme', theme);
// options.theme = 'myTheme';

tui.chart.mapChart(container, data, options);
</script>
<!--For tutorial page-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/codemirror.js'></script>
<script src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/edit/matchbrackets.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/selection/active-line.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/mode/javascript/javascript.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/lint/lint.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/lint/javascript-lint.js'></script>
<script src='./js/example.js'></script>
</body>
</html>
